<template>
	<view class="box">
		<form  class="change-mobile-form">
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					姓名
				</view>
				<input type="text" value="" v-model="name" class="flex1" placeholder="请填写产权人姓名"/>
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					身份证号
				</view>
				<input  maxlength="18" value="" v-model="messageCode" class="flex1" placeholder="请填写产权人身份证号"/>
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					手机号
				</view>
				<input type="number" value="" v-model="mobile" class="flex1" placeholder="请输入手机号" />
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					验证码
				</view>
				<input type="number" value="" v-model="smsCode" class="flex1" placeholder="请输入验证码" />
			
				<button type="primary" v-if="showbtn" class="send-code" @click="getMobileCode">{{phoneMsg}}</button>
				<button class="send-code" v-else>{{code_ts}}</button>
			</view>
			<button form-type="submit" class="next-btn" @click="phoneSubmit()">保存</button>
		</form>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data () {
			return {
				name:'',//姓名
				messageCode:'',//身份证号
				mobile: '', //手机号
				smsCode: '', //验证码
				phoneMsg: '获取验证码',
				showbtn: true, // 展示获取验证码或倒计时按钮判断
				code_ts: '获取验证码', //倒计时提示文字
				sec: 60, // 倒计时秒数
				flowId: '', //流程id
			}
		},
		methods:{
			// 获取手机验证码
			getMobileCode() {
			
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (!regIdNo.test(this.messageCode)) {
					uni.showToast({
						title: '请输入正确的身份证号',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				
				var mobileRegex = /^1\d{10}$/
				if (!mobileRegex.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				var timer = setInterval(() => {
					this.sec = this.sec - 1
					this.code_ts = this.sec + 'S后重试'
					this.showbtn = false
					if (this.sec === 0) {
						clearInterval(timer)
						this.sec = 60
						this.code_ts = this.sec + 'S后重试'
						this.showbtn = true
						this.phoneMsg = "重新获取"
					}
				}, 1000)
			
				let data = {
					name: this.name,
					idNo: this.messageCode,
					mobileNo: this.mobile,
					flowId: this.flowId
				}
				api.joinHellp.confirmCardSign(data).then(res => {
					if (res.code == 1) {
						this.flowId = res.data.flowId;
					}
				})
			
			},
			// 保存
			phoneSubmit(){
				if(this.name==''){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return;
				}
				var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
				if(!regIdNo.test(this.messageCode)){ 
				 uni.showToast({
				 	title: '请输入正确的身份证号',
				 	icon: 'none'
				 })
				  return false; 
				}
				if(this.smsCode==''){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return;
				}
				var data = {
					verifyCode: this.smsCode,
					flowId: this.flowId
				}
				api.joinHellp.certification(data).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '绑定成功'
						})
						uni.navigateBack(-2)
					}
				})
				
			}
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import url("../myMutualHelp/myMutualHelp.css");
</style>
